import styles from './style.less'
import { Select, Space } from 'antd';
import { useEffect } from 'react';
import { useState } from 'react';
import { pageQA } from '@/services/project/qa'
import { QAStatus } from '../../ProjectQA/QaPage'
import { connect } from 'dva';
import ArrayUtils from '@/utils/ArrayUtils'
const { Option } = Select;

const ProjectQaSelect = (props) => {
    const {
        value,
        defaultValue,
        onChange,
        ismultiple,
        params = {},
        disabled,
        projectId,
        defaultOpen,
        onSelect,
        onBlur,
        allowClear = false,
        width
    } = props;

    useEffect(() => {
        let realValue = value || defaultValue;
        if (projectId) {
            pageQA(projectId, params)
                .then(({ data }) => {
                    setProjectQaList(data?.list)
                    if (realValue && realValue !== '0') {
                        setRealValue(realValue)
                    }
                })
        }
    }, [projectId])

    // useEffect(() => {
    //     if (value) {
    //         setRealValue(value)
    //     }
    // },[value])

    const queryQAPage = (queryParams) => {
        let lastParams = {
            ...(queryParams || {}),
            ...(params || {}),
            inStatus: [1, 2, 3],
            pageSize: 100
        }
        pageQA(projectId, lastParams)
            .then(({ data }) => {
                setProjectQaList(data?.list)
            })
    }

    const [realValue, setRealValue] = useState();
    const [projectQaList, setProjectQaList] = useState([])

    const onSelectBlur = () => {
        if (onBlur) {
            onBlur()
        }
    }
    const onValueChange = (value) => {
        setRealValue(value)
        if (ismultiple) {
            if (onChange) {
                onChange(value)
            }
        } else {
            if (onChange) {
                onChange(value)
            }
        }
    }

    const onItemSelect = (id) => {
        let selectItem = ArrayUtils.findOne(projectQaList, item => item.id === id)
        if (onSelect) {
            onSelect(id, selectItem)
        }
    }

    const onFocus = () => {

    }
    const onSearch = () => {
    }

    return (
        <Select
            disabled={disabled}
            showSearch
            allowClear={allowClear}
            onBlur={onBlur}
            placeholder="请选择测试项"
            dropdownClassName={styles.dropdownClassName}
            mode={ismultiple ? "multiple" : ""}
            onChange={onValueChange}
            onSelect={onItemSelect}
            onFocus={onFocus}
            onBlur={onSelectBlur}
            defaultOpen={defaultOpen}
            value={realValue}
            optionLabelProp="title"
            onSearch={onSearch}
            className={styles.select}
            style={{ width: width || '100%' }}
            maxTagCount={10}
            filterOption={(input, option) =>
                option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {projectQaList.map((item) => (
                <Select.Option value={item.id} key={item.id} title={item.name || ''} >
                    <Space><QAStatus status={item.status} />{item.name}</Space>
                </Select.Option>
            ))}
        </Select>
    )

}

export default connect()(ProjectQaSelect);
